<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar>
    <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
      <div class="wage-detail-title">{{ info.name || '-' }}</div>
      <div class="btns-bar">
        <a-button type="primary" style="margin-right: 10px" @click="clickTips('','提示','确认结算吗？',ok)" v-if="info.status != 1"> 确认结算 </a-button>
        <a-button @click="exportItem(info.id)">导出</a-button>
      </div>
      <div class="wage-detail-box">
        <div class="status-icon">
          <img src="~@/assets/img/wage/queren.png" alt="" v-if="info.status == 1" />
          <img src="~@/assets/img/wage/weiqueren.png" alt="" v-if="info.status == 2||!info.status" />
        </div>
        <a-row>
          <a-col :span="9" class="header-item">
            <div class="title">
              <a-icon type="calendar" class="anticon" />
              结算区间
            </div>
            <span class="title-value">{{ info.start_time }}至{{ info.end_time }}</span>
          </a-col>
          <a-col :span="5" class="header-item">
            <div class="title">
              <a-icon type="pay-circle" class="anticon" />
              结算金额
            </div>
            <span class="title-value money">{{ info.money }}元</span>
          </a-col>
          <a-col :span="5" class="header-item">
            <div class="title">
              <a-icon type="user" class="anticon" />
              结算人
            </div>
            <span class="title-value">{{ info.user_name }}</span>
          </a-col>
          <a-col :span="5" class="header-item">
            <div class="title">
              <a-icon type="clock-circle" class="anticon" />
              日期
            </div>
            <span class="title-value">{{ info.pay_date }}</span>
          </a-col>
        </a-row>
      </div>
      <div class="table-content">
        <div class="title">
          <span class="name">工资明细</span>
          <span class="unit">单位:元</span>
        </div>
        <a-button type="primary" @click="clickTips('','核准确认','确定数据已核准无误？',save)" style="margin-bottom:10px;" v-if="info.status != 1"> 保存 </a-button>
        <div>
          <!-- <a-table :columns="cColumns" :data-source="cData" class="user_management_table" :pagination="false">
            <span v-for="(item, index) in payslipsListRes.data" :key="index">
              <span :slot="item.payslip_item.name" slot-scope="text, record">
                {{ record }}
              </span>
            </span>
          </a-table> -->
          <!-- template 风格的  -->
          <a-table :data-source="DTData" :pagination="false" class="user_management_table" style="border:1px solid #e8e8e8;">
            <a-table-column key="name" title="姓名" data-index="name" />
            <a-table-column title="手机号" data-index="phone" />
            <a-table-column title="是否授课">
              <template slot-scope="record">
                <span>
                  {{ record.is_on_job ? '授课' : '不授课' }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="基本工资">
              <template slot-scope="record">
                <span>
                  <a-input v-model="record.base_pay" style="width: 100px" @change="cc(record)" :disabled="isDisabled"/>
                </span>
              </template>
            </a-table-column>
            <a-table-column title="奖金">
              <template slot-scope="record">
                <span>
                  <a-input v-model="record.bonus" style="width: 100px" @change="cc(record)"  :disabled="isDisabled"/>
                </span>
              </template>
            </a-table-column>

            <a-table-column title="上课绩效工资">
              <template slot-scope="record">
                <span v-if="record.achievements!=''"  style="color:#ff7519">
                  {{record.achievements_sum||0}}
                </span>
                <span v-else>未设置</span>
              </template>
            </a-table-column>

            
            <a-table-column :title="item.name" v-for="(item, index) in DTcolumns" :key="index + 100">
              <template slot-scope="record">
                <span style="position: relative">
                 <!--  <span style="z-index: 99; position: absolute; top: -2px; left: 4px" v-if="record[item.name].type == 2">-</span> -->
                  <a-input v-model="record[item.name].value" style="width: 100px" @change="cc(record)" :disabled="isDisabled"/>
                </span>
              </template>
            </a-table-column>
            <a-table-column title="小计">
              <template slot-scope="record">
                {{ record.sum }}
              </template>
            </a-table-column>
          </a-table>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'
import { settlementsInfo, LookPayslipList, setSettlements,setStatusSettlements,exportSettlements } from '@/api/wageSettlement'
export default {
  name: 'KKKK',
  components: {
    topNavBar,
  },
  data() {
    return {
      payslipsListRes: {},
      nowRouteTitle: '',
      school_id: this.$store.state.user.school,
      id: undefined,
      info: {},
      // WQRImg:require('@/assets/img/wage')
      dataGZ: [],
      columnsGZ: [
        {
          title: '员工姓名',
          dataIndex: 'name',
        },
        {
          title: '手机号',
          dataIndex: 'phone',
        },
        {
          title: '是否授课',
          dataIndex: 'name1',
        },
        {
          title: '基本工资',
          dataIndex: 'name2',
        },
        {
          title: '上课绩效工资',
          dataIndex: 'achievements_sum',
        },
      ],
      SalaryDetails: [],
      DTcolumns: [], //动态列
      DTData: [],
    }
  },
  computed: {
    cColumns() {
      const columnsKown = [
        {
          title: '员工姓名',
          dataIndex: 'name',
        },
        {
          title: '手机号',
          dataIndex: 'phone',
        },
        {
          title: '是否授课',
          dataIndex: 'name1',
        },
        {
          title: '基本工资',
          dataIndex: 'name2',
        },
        {
          title: '上课绩效工资',
          dataIndex: 'achievements_sum',
        },
      ]
      const data = (this.payslipsListRes && this.payslipsListRes.data) || []
      // 参数校验
      if (!data) {
        return []
      }
      // 数据转换
      const columnsDy = data.map((item) => {
        const title = item.payslip_item && item.payslip_item.name
        const dataIndex = title
        const key = title
        const defaultValue = item.value
        const scopedSlots = { customRender: title }
        return {
          title,
          dataIndex,
          key,
          defaultValue,
          scopedSlots,
        }
      })
      return [...columnsDy]
    },
    cData() {
      const data = (this.info && this.info.teachers) || []
      let obj = {}
      const arr = data.forEach((item) => {
        const rs = {}
        obj.name = item.user_school.name
        this.cColumns.forEach((column) => {
          rs[column.key] = column.defaultValue
        })
        return {
          // ...item,
          ...obj,
          ...rs,
        }
      })
      return arr
    },
    isDisabled(){
      return this.info.status==1?true:false
    }
  },
  created() {
    this.nowRouteTitle = this.$route.meta.title
    this.id = this.$route.params.id
    this.getInfo(this.id)
    this.look()
  },

  methods: {
    getInfo(id) {
      settlementsInfo(id)
        .then((res) => {
          this.info = res
          const data = (this.info && this.info.teachers) || []
          let obj = {}
          this.DTData=[]
          data.forEach((item) => {
            const rs = {}
            obj.base_pay = item.base_pay
            obj.phone = item.user_school.user.phone
            obj.is_on_job = item.user_school.is_on_job
            obj.name = item.user_school.name
            obj.bonus = item.bonus
            obj.sum = Number(item.base_pay) + Number(item.bonus)
            obj.user_school_id = item.user_school_id
            obj.achievements=item.achievements
            obj.achievements_sum=item.achievements_sum
            item.payslips.forEach((column) => {
              rs[column.payslip_item.name] = {
                value: column.value,
                id: column.payslip_item.id,
                name: column.payslip_item.name,
                type: column.payslip_item.type,
              }
              obj.sum = Number(obj.sum) + Number(rs[column.payslip_item.name].value)
            })
            if(obj.achievements_sum!=null){
              obj.sum+=Number(obj.achievements_sum)
            }
            this.DTData.push({ ...obj, ...rs })
          })
          console.log(this.DTData)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    look() {
      LookPayslipList(this.id)
        .then((res) => {
          this.payslipsListRes = res
          this.payslipsListRes.data.forEach((item) => {
            this.DTcolumns.push({
              name: item.payslip_item.name,
              type: item.payslip_item.type,
              value: 0,
            })
          })
        })
        .catch((err) => {})
    },
    cc(data) {
      let x = 0
      for (let i in data) {
        if (data[i].value) {
          if (data[i].type == 2) {
            x -= Number(data[i].value)
          } else {
            x += Number(data[i].value)
          }
        } else if (i == 'base_pay' || i == 'bonus') {
          x += Number(data[i])
        }
      }
      data.sum = x
      console.log(this.info.money)
      this.info.money = this.tongji()
      console.log(this.info)
    },
    tongji() {
      let sums = 0
      this.DTData.forEach((item) => {
        sums += item.sum
        // console.log(item.sum);
      })
      return Number(sums)
    },
    save() {
      this.DTData.forEach((item) => {
        item.payslip_item_arr = []
        for(let i in item){
          if (item[i]!=null&&item[i].id) {
            item.payslip_item_arr.push({ ...item[i] })
          }
        }
          
      })
      setSettlements(this.id, { data: this.DTData })
        .then((res) => {
          this.$message.success('保存成功')
          
          this.getInfo(this.id)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '保存失败')
        })
      console.log(this.DTData)
    },
    back() {
      this.$router.go(-1)
    },
    ok(){
      setStatusSettlements(this.id,{status:1}).then(res=>{
         this.$message.success('保存成功')  
         this.back() 
      }).catch((err) => {
          this.$message.error(err.data.message || '保存失败')
        })
    },
    exportItem(id) {
      exportSettlements(id, { school_id: this.$store.state.user.school })
        .then((res) => {
          this.$message.success('导出成功')
          window.location.href = res.url.url + res.url.path
        })
        .catch((err) => {
          this.$message.error(err.data.message || '导出失败')
        })
    },
  },
}
</script>

<style lang="less" scoped>
.wage-detail-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}
.btns-bar {
  margin: 12px 0;
}
.wage-detail-box {
  border: 1px solid #e8e8e8;
  padding: 25px 20px;
  position: relative;
  .status-icon {
    position: absolute;
    right: 22px;
    top: -40px;
    img {
      width: 80px;
    }
  }
  .header-item {
    padding-left: 20px;
    .title {
      .anticon {
        font-size: 20px;
        margin-right: 5px;
        position: relative;
        top: 2px;
      }
    }
    .title-value {
      font-size: 18px;
      padding-left: 25px;
      font-weight: 700;
    }
    .money {
      color: #ff7519;
    }
  }
}
.table-content {
  margin-top: 16px;
  .title {
    margin-bottom: 12px;
    .name {
      color: #333;
      font-size: 16px;
      font-weight: 500;
      margin-right: 8px;
    }
    .unit {
      color: #999;
    }
  }
}
.b-table {
  width: 100%;
}
</style>